<!--
*@Author: QWP
*@Description: 办公用品领用编辑
*@Date: 2024-07-08 17:04:38
-->
<template>
  <u-dialog v-bind="$attrs"
    @close="dialogClose">
    <a-layout class="f-h-100">
      <a-layout-content class="s-bg-white"
        style="overflow: auto">
        <a-space  direction="vertical">
          <u-busi-card title="基本信息"
            :bordered="false">
            <u-form :elements="formEls"
              :model="form"
              :gutter="0"
              ref="formRef">
            </u-form>
          </u-busi-card>
        </a-space>
      </a-layout-content>
    </a-layout>
  </u-dialog>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted, h } from 'vue' 

import { useRoute, useRouter } from 'vue-router'
import { _IFormEl, _IExtra } from '@/src/components/common/form/interface';
import { FormInstance, FormItemProps } from 'ant-design-vue';
import { HomeOutlined, FileTextOutlined, UploadOutlined } from '@ant-design/icons-vue';
import { TreeProps } from 'ant-design-vue/es/vc-tree';
import { ColumnProps } from 'ant-design-vue/es/table';
import { _IColumnProps } from '@/components/common/tableEdit/interface.ts'
import { fileCols } from '@/common/model/fileCols'
const route = useRoute()

const formRef = ref<FormInstance>()
const form = reactive({
  sqr: '丁艳玲',
  sqrbm: '办公室',
})
const formItemProps: FormItemProps & _IExtra = {
  labelWidth: '90px',
  colon: false
}
const formEls: Array<_IFormEl> = [
  { label: '申请人', key: 'sqr', col: { span: 8,}, element: 'input', 
    formItemProps: { ...formItemProps, required: true, },
    componentProps: { disabled: true }
  },
  { label: '申请人部门', key: 'sqrbm', col: { span: 8,}, element: 'input', 
    formItemProps: { ...formItemProps, required: true, }, 
    componentProps: { disabled: true }
  },
  { label: '需要日期', key: 'xyrq', col: { span: 8,}, element: 'datepicker', 
    formItemProps: { ...formItemProps, required: true, } 
  },
  { label: '物资名称', key: 'title', col: { span: 8,}, element: 'input', 
    formItemProps: { ...formItemProps, required: true } 
  },
  { label: '物资名称', key: 'swbm', col: { span: 8 }, element: 'input', 
    formItemProps: { ...formItemProps, required: true } 
  },
  { label: '规格及型号', key: 'sqrq', col: { span: 8 }, element: 'select', 
    formItemProps: { ...formItemProps, required: true } 
  },
  { label: '价格(元)', key: 'jg', col: { span: 8 }, element: 'money', 
    formItemProps: { ...formItemProps, required: true } 
  },
  { label: '数量', key: 'zcmc', col: { span: 8 }, element: 'number', 
    formItemProps: { ...formItemProps, required: true } 
  },
  { label: '总价(元)', key: 'zje', col: { span: 8 }, element: 'money', 
    formItemProps: { ...formItemProps, required: true } ,
    componentProps: { disabled: true, }
  },
  { label: '相关项目', key: 'ly', col: { span: 8 }, element: 'input', 
    formItemProps: { ...formItemProps, } 
  },
  { label: '相关客户', key: 'xgkh', col: { span: 8 }, element: 'input', 
    formItemProps: { ...formItemProps, } 
  },
  { label: '相关文档', key: 'xgwd', col: { span: 8 }, element: 'input', 
    formItemProps: { ...formItemProps, } 
  },
  { label: '备注', key: 'sm', col: { span: 24 }, element: 'textarea', 
    formItemProps: { ...formItemProps } 
  },
]

// 文件上传列表
const tabData: Array<any> = reactive([]); 
const columns: Array<_IColumnProps> = fileCols(); 

// 文件上传列表
const detialTabData: Array<any> = reactive([]); 
const detialCols: Array<_IColumnProps> = [
  { title: '资产名称', dataIndex: 'zcmc', minWidth: 150, element: 'input' },
  { title: '借用人', dataIndex: 'jyr', minWidth: 150, element: 'select' },
  { title: '数量', dataIndex: 'sl', minWidth: 150, element: 'number' },
  { title: '借用期限', dataIndex: 'jysm', minWidth: 150, element: 'number' },
]; 


// 弹窗关闭
const dialogClose = () => {
  formRef.value.form.resetFields();
}
</script>

<style lang='scss' >
</style>